<template>
    <div>
        <header class="px-5 py-2 bg-gradient-to-tr from-pink-500 via-yellow-500 to-red-500 flex">
            <input
                type="text"
                class="flex-1 rounded-lg text-lg p-1 focus:outline-none"
                maxlength="18"
                placeholder="可搜索用户名/文章内容"
                v-model="searchValue"
            />
            <button class="text-white pl-1" @click="search">搜索</button>
        </header>
        <div class="px-5">
            <card class="mt-3" v-for="i in blogList" :key="i.id">
                <div>
                    <div>
                        <span class="text-blue-500 text-sm">此推文来自用户：{{ i.account }}</span>
                        <p class="py-3">{{ i.content }}</p>
                        <div class="flex justify-end items-center space-x-3 text-gray-500">
                            <div class="flex items-center space-x-1">
                                <icon-font name="attention" />
                                <div class="text-sm">{{ i.attention }}</div>
                            </div>
                            <div @click="handlerStar(i.id)" class="flex items-center space-x-1">
                                <icon-font name="favor-light" />
                                <div class="text-sm">{{ i.star }}</div>
                            </div>
                        </div>
                        <div class="text-right text-xs text-blue-500">{{ handlerDate(i.time) }}</div>
                    </div>
                </div>
            </card>
        </div>
        <div
            class="
                fixed
                bottom-20
                right-5
                bg-gradient-to-br
                from-pink-500
                to-yellow-500
                h-12
                w-12
                rounded-full
                flex
                justify-center
                items-center
            "
        >
            <router-link to="/sendBlog">
                <div class="text-white">
                    <span>发文</span>
                </div>
            </router-link>
        </div>
    </div>
</template>

<script>
import Card from '../components/Card'
import IconFont from '../components/IconFont'
import $dayjs from 'dayjs'

// api
import * as api from '../api/blog'

export default {
    components: { Card, IconFont },

    data: () => ({
        page: 0,
        lastPage: 1,
        blogList: [],
        searchValue: '',
    }),

    beforeMount() {
        this.fetchData()
        window.addEventListener('scroll', this.handlerScroll)
    },

    methods: {
        async fetchData() {
            if (this.lastPage <= this.page) return
            const { page } = this
            const {
                data: { data, lastPage },
            } = await api.getBlog(this.$http, { page })
            this.blogList = this.blogList.concat(data)
            this.lastPage = lastPage
            this.page = page + 1
        },

        handlerScroll() {
            const height = document.body.clientHeight + document.documentElement.scrollTop
            if (height + 20 >= document.body.scrollHeight) {
                this.fetchData()
            }
        },

        async search() {
            this.page = 0
            const { page, searchValue } = this
            if (!searchValue) {
                this.blogList = []
                this.fetchData()
                return
            }
            const {
                data: { data, lastPage },
            } = await api.getBlog(this.$http, { page, searchValue })
            this.page = 1
            this.lastPage = lastPage
            this.blogList = data
        },

        async handlerStar(id) {
            const { data } = await api.starBlog(this.$http, { id })
            if (!data.success) return

            this.blogList = this.blogList.map((i) => {
                if (i.id == id) {
                    console.log(i)
                    i.star = i.star + 1
                }
                return i
            })
        },

        handlerDate(time) {
            return $dayjs(time).format('YYYY-MM-DD HH:mm:ss')
        },
    },
}
</script>

<style></style>
